<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" th:href="@{/res/css/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/res/css/admin.css}">
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <script th:src="@{/js/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/myplugs/js/plugs.js}"></script>
</head>

<body>

<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">菜单管理</strong><small></small></div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">

                    <button class="am-btn am-btn-default btnAdd" id="addmenu" onclick="addmenu('添加菜单')">
                        <span class="am-icon-plus"></span> 新增
                    </button>

                </div>
            </div>
        </div>
    </div>
    <div class="am-g" style="margin-top: 5px;">
        <div class="am-u-sm-12">

            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-id">
                            序号
                        </th>

                        <th>
                            菜单名称
                        </th>

                        <th class="table-set">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody id="menuTable">

                    </tbody>
                </table>
                <div class="am-cf" id="bottom_number"> </div>
            </form>
        </div>
    </div>
</div>

<script>
    //初始化列表
    $(function() {
        var $tbody = $("#menuTable");
        $.ajax({
            type:"post",
            url:"/menu/selectMenu",//获取所有菜单信息
            data:{},
            dataType:'json',
            success:function(data){//渲染数据
                console.log(data);
                var str='';
                for(var i=0;i<data.length;i++){
                    str+='<tr>';
                    str+='<td><span>' + (i+1) +'</span></td>';
                    str+='<td> <a href="javascript:void(0)">' + data[i].name + '</a> </td>';
                    str+='<td>';
                    str+='<div class="am-btn-toolbar">';
                    str+='<div class="am-btn-group am-btn-group-xs">';
                    str+='<button type="button" id="role_'+(i+1)+'" class="am-btn am-btn-default" onclick="editMenu(\'编辑菜单\','+ data[i].menuId + ','+ "\'"+data[i].name+"\'"+","+data[i].id +","+data[i].level+","+data[i].url+')">';
                    str+='<span class="am-icon-pencil-square-o"></span> 编辑</button>';
                    str+='<button type="button" class="am-btn am-btn-default" onclick="delMenu(\'删除菜单\','+ data[i].id + ')">';
                    str+='<span class="am-icon-trash-o"></span> 删除</button>';
                    str+='</div>';
                    str+='</div>';
                    str+='</td>';
                    str+=' </tr>';
                }
                $tbody.html(str);
                $("#bottom_number").append("共" + data.length+ " 条记录");
            },
            error:function(){
                alert(error);
            }
        })
    });

    //添加编辑弹出层
    function editMenu(title, menu_id,name,id,level,url) {
        $.jq_Panel({
            title: title,
            iframeWidth: 450,
            iframeHeight: 250,
            url: "/editMenu?name=" + name + "&menu_id=" + menu_id + "&id=" + id + "&level=" + level +"&url=" + url
        });
    }

    function delMenu(title,id){//跳转删除页面
        $.jq_Panel({
            title: title,
            iframeWidth: 350,
            iframeHeight: 100,
            url: "/deleteMenu?id=" + id
        });
    }

    function addmenu(title){//跳转添加页面
        $.jq_Panel({
            title: title,
            iframeWidth: 450,
            iframeHeight: 200,
            url: "/addMenu"
        });
    }
</script>
</body>
</html>